<script>
  import addtable from '@/mixins/addtable'
  import AjaxStore from '@/utils/store/proxyAjax'
  import store from './store.js'
  import WrapTable from '@/components/WrapTable'
  import ButtonList from '@/components/ButtonList'
  import TableButtonList from '@/components/TableButtonList'
  import SearchForm from '@/components/SearchForm'

  export default {
    name: 'programCode',
    mixins: [addtable, store],
    components: {
      WrapTable,
      ButtonList,
      TableButtonList,
      SearchForm
    },
    data() {
      return {
        selectedList: [],
        tableOptWidth: '100',
        dialogType: '',
        idKey: 'codeId',
        delIdKey: 'codeId',
        delListIdKey: 'codeIds',

        addUrl: '/v1/sys/code/add',
        updateUrl: '/v1/sys/code/update',
        delUrl: '/v1/sys/code/delete',
        delListUrl: '/v1/sys/code/deleteList',
        syncUrl: '/v1/sys/code/sync',
        url: '/v1/sys/code/findById',
        store: new AjaxStore({
          url: '/v1/sys/code/query'
        }),
        columns: [
          { prop: "codeType", label: "代码类别", sortable: true, "show-overflow-tooltip": true, 'min-width': "120", 'header-align': 'center' },
          { prop: "typeName", label: "类别名称", sortable: true, 'min-width': "120", "show-overflow-tooltip": true, 'header-align': 'center' },
          { prop: "codeValue", label: "参数值", sortable: true, "show-overflow-tooltip": true, 'min-width': "87", 'header-align': 'center' },
          { prop: "codeName", label: "参数名称", sortable: true, 'min-width': "120", "show-overflow-tooltip": true, 'header-align': 'center' },
          { prop: "orderNo", label: "排序号", sortable: true, width: "90", 'header-align': 'center' },
          { prop: "maintainFlag", label: "维护标志", sortable: true, width: "104", 'header-align': 'center', formatter: (row, column, cellValue) => cellValue ? '可维护' : '不可维护' },
          { prop: "remark", label: "备注", sortable: true, 'min-width': "160", "show-overflow-tooltip": true, 'header-align': 'center' }
        ],
        searchFields: [
          { label: '代码类别', prop: 'codeType', placeholder: '输入代码类别', anchor: 9 },
          { label: '类别名称', prop: 'typeName', placeholder: '输入类别名称', anchor: 12 }
        ],
        searchModel: {
          "codeType": '',
          "typeName": ''
        },

        searchBtnList: this.searchBtns,
        toolPanelBtnList: this.toolPanelBtns,
        tableRowBtnLists: this.tableRowBtnLists,
        tableRowBtnListImport: [],
        tableRowBtnList: [],

        formPanel: {
          add: {
            model: {
           		"codeType": '',
           		"typeName": '',
           		"codeValue": '',
           		"codeName": '',
           		"orderNo": '',
           		"maintainFlag": '1',
           		"remark": '' },
            fields: [
        		{ label: '代码类别', prop: 'codeType', placeholder: '输入代码类别', anchor: 24 },
        		{ label: '类别名称', prop: 'typeName', placeholder: '输入类别名称', anchor: 24 },
        		{ label: '参数值', prop: 'codeValue', placeholder: '输入参数值', anchor: 24 },
        		{ label: '参数名称', prop: 'codeName', placeholder: '输入参数名称', anchor: 24 },
        		{ label: '排序号', prop: 'orderNo', placeholder: '输入排序号', anchor: 24 },
     			  // { label: '维护标志', prop: 'maintainFlag', xType: 'SelectCode.MAINTAIN_FLAG', placeholder: '输入维护标志', anchor: 24},
        		{ label: '备注', prop: 'remark', type: 'textarea', placeholder: '输入备注', anchor: 24 }],
            rules: {
              "codeType": [{ required: true, message: '请输入代码类别', trigger: 'blur' }],
              "typeName": [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
              "codeValue": [{ required: true, message: '请输入参数值', trigger: 'blur' }],
              "codeName": [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
              "maintainFlag": [{ required: true, message: '请输入维护标志', trigger: 'blur' }]
            },
            title: '新增代码字典',
            type: 'ADD',
            ref: 'addForm',
            submitBtnList: this.addBtns
          },
          edit: {
            model: {
              "projectId": '',
              "codeId": '',
          	 "codeType": '',
          	 "typeName": '',
          	 "codeValue": '',
          	 "codeName": '',
          	 "orderNo": '',
          	 "maintainFlag": '1',
          	 "remark": '' },
            fields: [
       			 { label: '代码类别', prop: 'codeType', placeholder: '输入代码类别', anchor: 24 },
       			 { label: '类别名称', prop: 'typeName', placeholder: '输入类别名称', anchor: 24 },
       			 { label: '参数值', prop: 'codeValue', placeholder: '输入参数值', anchor: 24 },
       			 { label: '参数名称', prop: 'codeName', placeholder: '输入参数名称', anchor: 24 },
       			 { label: '排序号', prop: 'orderNo', placeholder: '输入排序号', anchor: 24 },
         		//  { label: '维护标志', prop: 'maintainFlag', xType: 'SelectCode.MAINTAIN_FLAG', placeholder: '输入维护标志', anchor: 24},
       			 { label: '备注', prop: 'remark', type: 'textarea', placeholder: '输入备注', anchor: 24 }],
            rules: {
         	   "codeType": [{ required: true, message: '请输入代码类别', trigger: 'blur' }],
         	   "typeName": [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
         	   "codeValue": [{ required: true, message: '请输入参数值', trigger: 'blur' }],
         	   "codeName": [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
         	   "maintainFlag": [{ required: true, message: '请输入维护标志', trigger: 'blur' }]
            },
            title: '编辑代码字典',
            type: 'EDIT',
            ref: 'editForm',
            submitBtnList: this.editBtns
          },
          look: {
            model: {
          	    "codeType": '',
          	    "typeName": '',
          	    "codeValue": '',
          	    "codeName": '',
          	    "orderNo": '',
          	    "maintainFlag": '1',
          	    "remark": '' },
            fields: [
          		{ label: '代码类别', prop: 'codeType', placeholder: '', anchor: 24, disabled: true },
          		{ label: '类别名称', prop: 'typeName', placeholder: '', anchor: 24, disabled: true },
          		{ label: '参数值', prop: 'codeValue', placeholder: '', anchor: 24, disabled: true },
          		{ label: '参数名称', prop: 'codeName', placeholder: '', anchor: 24, disabled: true },
          		{ label: '排序号', prop: 'orderNo', placeholder: '', anchor: 24, disabled: true },
         		  // { label: '维护标志', prop: 'maintainFlag', xType: 'SelectCode.MAINTAIN_FLAG', placeholder: '', anchor: 24, disabled: true },
              { label: '备注', prop: 'remark', type: 'textarea', placeholder: '', anchor: 24, disabled: true }
            ],
            rules: {
            },
            title: '查看代码字典',
            type: 'LOOK',
            ref: 'lookForm',
            submitBtnList: this.lookBtns
          }
        }
      }
    },
    methods: {
      handleSync() {
        this.syncData().then((res) => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      // eslint-disable-next-line
      renderWrapTable(h){
        return (
          <WrapTable
            ref="table"
            getData={ this.getData }
            total={ this.total }
            data={ this.data }
            fields={ this.columns }
            tooltip-effect="dark"
            border
            stripe
            default-sort = { { prop: 'maintainFlag', order: 'descending' } }
            on-selection-change={ this.handleSelectionChange }
            on-row-dblclick={ this.handleCurrentChange }>
            <SearchForm
              items={ this.searchFields }
              props-model={ this.searchModel } slot="searchPanel" ref="searchForm">
              <ButtonList
                operateBtnList={this.searchBtnList}
                props-model={this.searchModel}
              >
              </ButtonList>
            </SearchForm>

            <c-row slot="toolPanel" class="toolPanel">
              <c-col span={this.btnListWidthPercent}>
                <ButtonList
                  operateBtnList={this.toolPanelBtnList}

                ></ButtonList>
              </c-col>
              <c-col span={this.searchInputWidthPercent}>
                { this.showInputFlag ? (<c-input class="search-input" placeholder={this.inputPlaceholder} size="small"
                  on-input={ event => { this.searchInput = event } }
                  nativeOnKeydown={(ev) => { ev.keyCode === 13 ? this.handleInputClick(ev, this.searchInput) : null } } >
                  <i slot="suffix" class="el-input__icon el-icon-search" on-click={ (ev) => this.handleInputClick(ev, this.searchInput) }></i>
                </c-input>) : '' }
              </c-col>
            </c-row>

            <c-table-column label="操作" fixed="right" align="center" slot="toolbar" width={this.tableOptWidth}
              { ...{
                scopedSlots: {
                  default: scope => {
                    return (
                      <TableButtonList
                        operateBtnList={scope.row.maintainFlag ? this.tableRowBtnLists : this.tableRowBtnListImport}
                        props-model={ scope.row }

                      ></TableButtonList>
                    )
                  }
                }
              }
              }
            >
            </c-table-column>
          </WrapTable>
        )
      }
    },

    beforeCreate() {
      // 根据页面路由找出有权限访问的 url 数组
      const urlArr = (this.$route.meta && this.$route.meta.children || []).map(item => item.url)

      // 根据权限 url 数组过滤出能够使用的 按钮数组
      this.searchBtns = [
        { label: '查询', methods: 'handleSearch', url: '/v1/sys/code/query', icon: 'el-icon-search', type: 'primary', disabled: false },
        { label: '重置', methods: 'handleSearchReset', url: '', icon: 'el-icon-refresh', type: 'warning', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.toolPanelBtns = [
        { label: '新增', methods: 'handleAdd', url: '/v1/sys/code/add', icon: 'el-icon-circle-plus-outline', type: 'primary', disabled: false },
        { label: '删除', methods: 'handleDelGroup', url: '/v1/sys/code/deleteList', icon: 'el-icon-delete', type: 'danger', disabled: false },
        { label: '同步', methods: 'handleSync', url: '/v1/sys/code/sync', svgIcon: 'sync', type: 'sync', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)))

      this.tableRowBtnLists = [
        { label: '编辑', methods: 'handleEdit', url: '/v1/sys/code/update', icon: 'el-icon-edit-outline', type: 'primary', key: 'edit', align: 'top-start', disabled: false },
        { label: '删除', methods: 'handleDelete', url: '/v1/sys/code/delete', icon: 'el-icon-delete', type: 'danger', key: 'delete', align: 'top-start', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.addBtns = [
        { label: '保存并新增', methods: 'handleSubmitAndAdd', url: '/v1/sys/code/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '保存', methods: 'handleAddSubmit', url: '/v1/sys/code/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.editBtns = [
        { label: '保存', methods: 'handleEditSubmit', url: '/v1/sys/code/update', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.lookBtns = [
        { label: '保存', methods: '', url: '', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: true },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
    }
  }
</script>

<style lang="scss">
  .programCode{
    .searchPanel{
      padding-bottom: 0;
      .search-btn-box{
        bottom: 0;
      }
    }
  }
</style>
